<template>
  <div class="form_bar">
    <div class="switchPage">
      <!--暂时隐藏-->
      <!-- <div class="course">
        <div class="course_icon">
          <el-icon><reading /></el-icon>
        </div>
        <span>功能说明</span>
      </div> -->
    </div>
    <div class="btnList">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, onBeforeUnmount } from 'vue'
  import bus from '@/utils/bus'
  import Dialog from '@/components/Dialog.vue'
  import ZWSelectTag from '@/components/ZWSelectTag.vue'
  import router from '@/router'
  import { useStore } from '@/store'
  const store = useStore()
  const emit = defineEmits(['batchTag', 'batchDel', 'batchDown'])

  const selection = computed(() => {
    return store.getters['table'].tableData
  })
  const value = ref('')
  const checkAll = ref(false) // 是否为全选
  const isIndeterminate = ref(true)
  const indexBounced = ref(0) // 弹框的索引
  // 1-文本 2-图片 3-音频 4-视频 5-文件 6-链接文章 7-链接引用
  const type = computed(() => {
    return store.getters['content/type']
  })
  // 选中的图片内容
  const changeList = ref([])
  const imageIdList = ref([])
  const typeName = () => {
    switch (type.value) {
      case 2:
        return '上传图片'
      case 3:
        return '上传音频'
      case 4:
        return '上传视频'
      case 5:
        return '上传文件'
      case 6:
      case 7:
        return '快速创建'
    }
  }
  // 打开选择标签
  const batchTag = () => {
    formSelectRef.value.batchTag = true
    formSelectRef.value.appDialog.visible = true
    formSelectRef.value.appDialog.title = '批量标签'
    formSelectRef.value.selectTags = []
  }
  // 获取标签
  const getTags = (data: any) => {
    emit('batchTag', {
      tag_ids: data.tag_ids,
      defaultVal: data.defaultVal
    })
  }
  // 删除
  const batchDel = () => {
    emit('batchDel')
  }
  // 下载
  const batchDown = () => {
    emit('batchDown')
  }
  const openUpload = () => {
    store.dispatch('content/upload', {
      uploadVisib: true,
      title: typeName()
    })

    if (type.value == 5) {
      store.dispatch('content/tagsInfo', {
        showCreatTag: true
      })
    }
  }
  // 当前页和全部页的切换
  const options = [
    {
      value: '当前页',
      label: '当前页'
    },
    {
      value: '全部页',
      label: '全部页'
    }
  ]
  // 批量操作的显示弹框

  // 全选部分
  const change = (data: any) => {
    changeList.value = data
  }
  bus.on('change', change)
  const autoCheckedAll = (value: boolean) => {
    checkAll.value = value
  }
  bus.on('autoCheckedAll', autoCheckedAll)
  const handleCheckAllChange = (value: boolean) => {
    bus.emit('checkAll', value)
  }
  // 朋友圈创作素材
  const createFriend = () => {
    router.push('/content/friendcirclemat/createFriend')
  }
  // 销毁监听事件
  onBeforeUnmount(() => {
    bus.off('change', change)
  })
</script>

<style lang="scss" scoped>
  .form_bar {
    display: flex;
    justify-content: space-between;
    .switchPage {
      display: flex;
      align-items: center;
      .course {
        width: 100px;
        height: 37px;
        margin-left: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ff6b00;
        background: #fffaf9;
        border-radius: 2px;
        border: 1px solid #ffc69e;
        cursor: pointer;
        &_icon {
          margin-right: 8px;
          margin-top: 5px;
        }
      }
    }
    .btnList {
      display: flex;
      align-items: center;
      .add_btn {
        margin-right: 30px;
      }
    }
    .tags {
      &_title {
        margin: 10px 0;
      }
      &_list {
        display: flex;
        flex-wrap: wrap;
        &_item {
          color: #969696;
          padding: 4px 10px;
          background: #ffffff;
          border: 1px solid #eaeaea;
          margin-right: 16px;
          margin-bottom: 10px;
          cursor: pointer;
        }
        .checked {
          border: 1px solid #ff6b00;
          color: #ff6b00;
        }
      }
    }
  }
</style>
<style scoped>
  .drop_customer {
  }
</style>
